/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/28
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
} from 'react-native';

import Dimensions from 'Dimensions';
var {width} =Dimensions.get('window');

import HomeTopListView from './CMEHomeTopListView';


//引入外部JSON数据
import TopMenu from '../../../LocalData/TopMenu.json';

var that = null;

export default class HomeTopView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            activityPage: 0,
        };
    }

    render() {
        that = this;
        return (
            <View style={styles.parentStyle}>

                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onMomentumScrollEnd={this.onScrollAnimationEnd}
                >
                    {this.renderScrollItem()}
                </ScrollView>

                <View style={styles.indicatorViewStyle}>
                    {this.renderIndicator()}
                </View>

            </View>
        );
    }

    renderScrollItem() {
        let itemArr = [];
        let dataArr = TopMenu.data;
        for (let i = 0; i < dataArr.length; i++) {

            itemArr.push(
               <HomeTopListView
               key={i}
               dataArray={dataArr[i]}
               />
            );
        }
        return itemArr;
    }

    /**
     * 渲染指示器
     * @returns {Array}
     */
    renderIndicator() {

        let indicatorArr = [], style;
        for (let i = 0; i < 2; i++) {
            style = (i === this.state.activityPage) ? {color: 'orange'} : {color: 'gray'};
            indicatorArr.push(
                <Text key={i} style={[{fontSize: 27,}, style]}>&bull;</Text>
            );
        }
        return indicatorArr;
    }

    /**
     * 当一帧滚动结束
     */
    onScrollAnimationEnd(e) {
        //获取当前的页面
        let currentPage = Math.floor(e.nativeEvent.contentOffset.x / width);
        that.setState({
            activityPage: currentPage
        });
    }

}
const styles = StyleSheet.create({
    parentStyle: {
        backgroundColor: '#fff',
    },
    indicatorViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
});